<!--
 * @Author: chen qi
 * @Date: 2022-07-07 17:00:49
 * @LastEditors: chen qi
 * @LastEditTime: 2022-07-12 17:11:07
 * @Description:
-->
<template>
  <div class='home'>
    <!-- 头部 -->
    <header>
      <!-- <fullSreen/> -->
      <!-- 高60 -->
      <!-- <logoComp /> -->
    </header>
    <!-- 内容 -->
    <main>
      <!-- <centerMiddleMap2dChart v-drag/> -->
      <!-- <dynamicsLineChart v-drag/> -->
      <bmapChart/>
      <!-- <dateClockChart/> -->
      <!-- <swiperChart/> -->
      <!-- <centerMiddleMapChart></centerMiddleMapChart> -->

      <!-- <leftTopCapsuleChart v-drag class="a"/> -->
      <centerTopLineChart v-drag class="b"/>
    </main>
    <!-- 页脚 -->
    <footer>
      <!-- <leftBottomPieChart v-drag/> -->
      <!-- <rightBottomLineAndBarChart v-drag/> -->
      <!-- <rightMiddleSuperpositionBarChart v-drag/> -->
      <!-- <rightTopLeftDoubleCapsuleChart v-drag/> -->
    </footer>
  </div>
</template>

<script>
import { gsap } from 'gsap'
export default {
  props: {},
  name: 'home',
  data() {
    return {
    }
  },
  components: {},
  created() {

  },
  mounted() {
    const ctx = gsap.timeline()
    ctx.fromTo('.a', {
      opacity: 0,
      scale: 0
    }, {
      opacity: 1,
      scale: 1,
      duration: 0.5
    }, 1)
    ctx.fromTo('.b', {
      opacity: 0,
      scale: 0
    }, {
      opacity: 1,
      scale: 1,
      duration: 2,
      ease: 'bounce.out(100)'
      // stagger: 1.5
      // repeat: -1
    }, 0)
  },
  methods: {},
  watch: {},
  computed: {}
}
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  font-size: 50px;
  background: #000;
}
</style>
